<script setup lang="ts">
import { ref } from "vue";

defineProps<{
    searchColumn: any[];
}>();

export type SearchColumn = {
    [key: string]: string | number;
};
const search = ref<SearchColumn>({});

const emits = defineEmits<{
    (e: "query", search: SearchColumn): void;
}>();
const handleQuery = () => {
    emits("query", search.value);
};
const handleReset = () => {
    search.value = {};
};
</script>

<template>
    <div class="CommonSearch">
        <el-form :inline="true" :model="search" class="demo-form-inline">
            <template v-for="(item, index) in searchColumn" :key="index">
                <el-form-item
                    :label="item.label"
                    :label-width="`${item.searchLabel ?? 120}px`"
                >
                    <slot
                        v-if="$slots.hasOwnProperty(`${item?.prop}Search`)"
                        :name="`${item.prop}Search`"
                    >
                        <el-input
                            v-model="search[item.prop]"
                            :style="{
                                width: item.searchWidth
                                    ? item.searchWidth + 'px'
                                    : '',
                            }"
                            :placeholder="`请输入${item.label}`"
                        />
                    </slot>
                    <el-input
                        v-else
                        v-model="search[item.prop]"
                        :style="{
                            width: item.searchWidth
                                ? item.searchWidth + 'px'
                                : '',
                        }"
                        :placeholder="`请输入${item.label}`"
                    />
                </el-form-item>
            </template>
        </el-form>
        <div>
            <el-button type="primary" size="small" @click="handleQuery"
                >查询</el-button
            >
            <el-button type="primary" size="small" plain @click="handleReset"
                >重置</el-button
            >
        </div>
    </div>
</template>

<style lang="less" scoped>
.CommonSearch {
    display: flex;
    align-items: center;
}
</style>
